@import "~_a/styles/color.scss";

// 宽高 默认为正方形
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// 背景设定 第一个参数background-image 第二个参数background-size 第三个参数background-position
@mixin bg-setting($name: null, $size: cover, $position: center) {
  @if ($name) {
    background-image: url('~@/assets/images/#{$name}@2x.png');
  }

  background-size: $size; // 常用：contain/cover;
  background-repeat: no-repeat;
  background-position: $position; // 第一个参数竖直位置，第二个参数横向位置，例：top left;
}

// 背景设定 第一个参数background-image 第二个参数background-size 第三个参数background-position
@mixin bg-setting3($name: null, $size: cover, $position: center) {
  @if ($name) {
    background-image: url('~@/assets/userImages/#{$name}@2x.png');
  }

  background-size: $size; // 常用：contain/cover;
  background-repeat: no-repeat;
  background-position: $position; // 第一个参数竖直位置，第二个参数横向位置，例：top left;
}
// 背景设定 第一个参数background-image 第二个参数background-size 第三个参数background-position
@mixin bg-setting2($name: null, $size: cover, $position: center) {
  @if ($name) {
    background-image: url('~@/assets/images/#{$name}.png');
  }

  background-size: $size; // 常用：contain/cover;
  background-repeat: no-repeat;
  background-position: $position; // 第一个参数竖直位置，第二个参数横向位置，例：top left;
}
// flex布局 flex-direction/justify-content/align-items的取值在$flxNameMap中选取
$flxNameMap: (
  s: flex-start,
  e: flex-end,
  row: row,
  col: column,
  bw: space-between,
  ar: space-around,
  c: center,
  st: stretch,
  ev: space-evenly
);

@mixin flx($dir: row, $content: null, $item: null) {
  display: flex;
  flex-direction: map-get($flxNameMap, $dir);
  justify-content: map-get($flxNameMap, $content);
  align-items: map-get($flxNameMap, $item);
}

// Button的样式
@mixin btn-s($padding, $line-height, $border-radius) {
  text-align: center;
  padding: $padding;
  line-height: $line-height;
  border-radius: $border-radius;
  cursor: pointer;
}

// 颜色hover渐变 $bc：背景颜色 $h-bc：hover背景颜色 $fc：字体颜色 $h-fc：hover字体颜色，没有则填null
@mixin h-c($bc: null, $h-bc: null, $fc: null, $h-fc: null) {
  transition: if($h-bc, background-color 0.3s, null), if($h-fc, color 0.3s, null);
  background-color: $bc;
  color: $fc;

  &:hover {
    background-color: $h-bc;
    color: $h-fc;
  }
}

// 单行文字超出显示... font-ellipsis-single
@mixin f-ell-sin {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 多行文字超出显示... font-ellipsis-multiline
@mixin f-ell-mul($number) {
  display: -webkit-box;
  -webkit-line-clamp: $number;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// 阴影
@mixin b-sh {
  box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
}

// 三角形 三角形直角朝下，$size：三角形的高的长度，$color：三角形颜色
@mixin triangle($size, $color: $w) {
  height: 0;
  width: 0;
  border: $size solid;
  border-color: $color transparent transparent;
}
